<template>
  <van-toast v-model:show="toastVisible" position="bottom">
    <template #message>
      <div class="toast-message">
        <div class="toast-icon">
          <img src="../assets/image/jinbi.png" alt="" />
        </div>
        <div class="text">
          <div class="content1">{{ toastMessage.message }}</div>
          <div class="content2">{{ toastMessage.description }}</div>
        </div>
        <div class="num">+{{ toastMessage.money }}</div>
      </div>
    </template>
  </van-toast>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface ToastMessage {
  message: string
  description: string
  money: number
}

const toastVisible = ref(false)
const toastMessage = ref<ToastMessage>({
  message: '恭喜获得20个租币',
  description: '阅读信息',
  money: 20
})

const showToast = (message: ToastMessage) => {
  toastMessage.value = message
  toastVisible.value = true
}

defineExpose({
  showToast
})
</script>
<style lang="less" scoped>
.toast-message {
  width: 80vw;
  display: flex;
  align-items: center;

  .toast-icon img {
    width: 30px;
  }
  .toast-icon,
  .num {
    flex: 1;
  }

  .text {
    width: 60%;
    text-align: left;

    .content2 {
      font-size: 12px;
      color: #c2c2c2;
    }
  }
}
</style>
